<template>
  <view class="course-item" :class="{column:props.isColumn}">
    <view class="item-left">
      <image :src="itemData.mainImage" class="course-img" lazy-load mode=""></image>
      <view class="course-time">
        {{itemData.totalTime}}
      </view>
    </view>
    <view class="item-right">
      <view class="course-name">{{itemData.title}}</view>
      <view class="info">
        <view class="nickName iconfont icon-laoshi2">{{itemData.nickName}}</view>
        <view class="count">
          <view class="money" v-if="itemData.isFree">免费</view>
          <view class="money iconfont icon-moneybag" v-else>{{itemData.priceDiscount || itemData.priceOriginal}}</view>
          <view class="look iconfont icon-video">{{itemData.studyTotal}} 人在学</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  const props = defineProps({
    // 判断图片和文字是否纵向显示
    isColumn:{
      type:Boolean,
      default:false
    },
    item:{
      type:Object
    }
  })
  const itemData = props.item
</script>

<style lang="scss" scoped>
  .course-item{
    display: flex;
    // flex-direction: column;
    width: 100%;
    padding: 20rpx 0;
    
    .item-left{
      width: 290rpx;
      height: 160rpx;
      margin-right: 20rpx;
      position: relative;
      .course-img{
        width: 290rpx;
        height: 160rpx;
        border-radius: 10rpx;
      }
      .course-time{
        position: absolute;
        bottom: 5rpx;
        right: 5rpx;
        font-size: 22rpx;
        color: #fff;
        background: rgba(51, 51, 51, 0.4);
        border-radius: 20rpx;
        padding: 0 8rpx;
      }
    }
    
    .item-right{
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      height: 160rpx;
      padding-top: 5rpx;
      padding-left: 5rpx;
      .course-name{
        max-width: 290rpx;
        height: 70rpx;
        line-height: 35rpx;
        font-size: 28rpx;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        white-space: normal;
      }
      .info{
        .nickName{
          font-size: 23rpx;
          color: #999;
        }
        .count{
          display: flex;
          align-items: center;
          .iconfont{
            font-size: 23rpx;
            color: #222222;
          }
          .money{
            color: $mxg-text-color-red;
            width: 130rpx;
            font-size: 28rpx;
          }
        }
      }
    }
  }
</style>